<script lang="tsx">
import { defineComponent, ref, watch, h, compile, computed } from "vue";

export default defineComponent({
  name: "Icons",
  emits: ["updateForm"],
  props: {
    icons: {
      type: Array,
      default: [],
      required: true,
    },
    field: {
      type: String,
      default: "",
      required: true,
    },
  },
  setup(props, ctx) {
    const icons = ref([]);

    const selectIcon = (key) => {
      ctx.emit("updateForm", ...[props.field, key]);
    };

    watch(
      () => props.icons,
      (nv, ov) => {
        icons.value = Object.keys(nv).map((key) => {
          return h(compile(`<${key} />`), {
            class: "icon-style",
            style: { width: 35, height: 35 },
            onClick: () => selectIcon(key),
          });
        });
      },
      { deep: true, immediate: true }
    );

    return () => icons.value;
  },
});
</script>


<style lang="less">
.icon-style {
  margin: 2px;
  padding: 2px;
  border-radius: 5px;
  transition: 0.3s;
  &:hover {
    background-color: darkgrey;
  }
}
</style>